﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
            <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
                <c:set var="ctx" value="${pageContext.request.contextPath}" />
                <html>

                <head>
                    <title>企业信息管理</title>
                    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
                    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
                    <link rel="stylesheet" href="${ctx}/common/common.css" media="all">
                    <link rel="stylesheet"
                        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
                    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

                    <style type="text/css">
                        .rowtop {
                            padding: 10px;
                        }

                        .file-preview {
                            display: inline-block;
                        }

                        .file-item {
                            position: relative;
                            width: 100px;
                            height: 120px;
                            border: 1px solid #d9d9d9;
                            border-radius: 4px;
                            padding: 5px;
                            text-align: center;
                            background: #f8f8f8;
                        }

                        .file-icon {
                            font-size: 40px;
                            height: 70px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        .file-icon.img {
                            color: #e74c3c;
                        }

                        .file-icon.excel {
                            color: #27ae60;
                        }

                        .file-icon.pdf {
                            color: #e67e22;
                        }

                        .file-icon.word {
                            color: #3498db;
                        }

                        .file-icon.other {
                            color: #7f8c8d;
                        }

                        .file-name {
                            font-size: 12px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            margin-top: 5px;
                        }

                        .file-remove {
                            position: absolute;
                            top: -8px;
                            right: -8px;
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background: #ff5722;
                            color: white;
                            text-align: center;
                            line-height: 20px;
                            cursor: pointer;
                            font-size: 12px;
                            display: none;
                        }

                        .file-item:hover .file-remove {
                            display: block;
                        }

                        .upload-status {
                            margin-top: 10px;
                            font-size: 13px;
                            color: #666;
                        }

                        .upload-btn-group {
                            margin-top: 15px;
                        }

                        .supported-types {
                            margin-top: 10px;
                            font-size: 13px;
                            color: #666;
                        }

                        .file-preview-img {
                            max-width: 100px;
                            max-height: 70px;
                            object-fit: contain;
                        }
                    </style>
                </head>

                <body>
                    <form class="layui-form layui-container" method="post" action="${ctx}/enterprise/${action}"
                        enctype="multipart/form-data" id="enterpriseForm">
                        <input type="hidden" name="id" value="${entity.id}" />
                        <input type="hidden" name="companyId" value="${companyId}" />
                        <input type="hidden" name="report" id="report" value="${entity.report}" />
                        <div class="layui-row rowtop" style="margin-top: 20px;">
                            <div class="layui-row rowtop">
                                <div class="layui-col-md5">
                                    <label class="layui-form-label">年限（年）<span style="color: red">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="text" name="year" id="year" value="${entity.year}"
                                            placeholder="请选择年限" lay-verify="required" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-md5">
                                    <label class="layui-form-label">停产/复产<span style="color: red">*</span></label>
                                    <div class="layui-input-block valtop">
                                        <select name="isHaltProduction" lay-verify="required" ${!empty
                                            detail?"disabled":"" }>
                                            <option value="">请选择停产或复产</option>
                                            <c:forEach items="${resumptionType}" var="item">
                                                <option value="${item.code }" ${entity.isHaltProduction==item.code
                                                    ? "selected" :""}>${item.described}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row rowtop">
                                <div class="layui-col-md5">
                                    <label class="layui-form-label">检查记录<span style="color: red">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="text" name="samplingInspection" required
                                            value="${entity.samplingInspection}" lay-verify="required"
                                            placeholder="请输入检查记录" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row rowtop">
                                <div class="layui-form-item layui-col-md10">
                                    <label class="layui-form-label">上传报告<span style="color: red">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="file" name="file" id="fileInput" style="display: none;"
                                            accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx">
                                        <button type="button" class="layui-btn" id="uploadBtn">
                                            <i class="layui-icon">&#xe67c;</i>选择文件
                                        </button>
                                        <div class="file-preview" id="filePreview">
                                            <c:if
                                                test="${!empty entity.report && fn:length(entity.report)>0 && entity.report != 'null'}">
                                                <div class="file-item">
                                                    <div class="file-remove" onclick="removeUploadedFile()"><i
                                                            class="layui-icon">&#x1006;</i></div>
                                                    <div class="file-icon">
                                                        <c:choose>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'image'}">
                                                                <img src="${ctx}/files/${fileInfo.serverFileName}"
                                                                    class="file-preview-img"
                                                                    onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                                <div
                                                                    style="display:none; color: #999; font-size: 12px;">
                                                                    图片加载失败</div>
                                                            </c:when>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'excel'}">
                                                                <i class="fas fa-file-excel excel"></i>
                                                            </c:when>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'pdf'}">
                                                                <div class="file-icon pdf">
                                                                    <i class="fas fa-file-pdf "></i>
                                                                </div>
                                                            </c:when>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'word'}">
                                                                <i class="fas fa-file-word word"></i>
                                                            </c:when>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileType == 'text'}">
                                                                <i class="fas fa-file-alt text"></i>
                                                            </c:when>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == true}">
                                                                <i class="fas fa-file other"></i>
                                                            </c:when>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == false}">
                                                                <i class="fas fa-exclamation-triangle"
                                                                    style="color: #ff5722;"></i>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <c:choose>
                                                                    <c:when
                                                                        test="${fn:endsWith(entity.report, '.jpg') || fn:endsWith(entity.report, '.png') || fn:endsWith(entity.report, '.gif')}">
                                                                        <c:set var="reportPath"
                                                                            value="${entity.report}" />
                                                                        <c:if
                                                                            test="${fn:startsWith(reportPath, '/files/')}">
                                                                            <c:set var="reportPath"
                                                                                value="${fn:substringAfter(reportPath, '/files/')}" />
                                                                        </c:if>
                                                                        <img src="${ctx}/files/${reportPath}"
                                                                            class="file-preview-img"
                                                                            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                                        <div
                                                                            style="display:none; color: #999; font-size: 12px;">
                                                                            图片加载失败</div>
                                                                    </c:when>
                                                                    <c:when
                                                                        test="${fn:endsWith(entity.report, '.xls') || fn:endsWith(entity.report, '.xlsx')}">
                                                                        <i class="fas fa-file-excel excel"></i>
                                                                    </c:when>
                                                                    <c:when
                                                                        test="${fn:endsWith(entity.report, '.pdf')}">
                                                                        <div class="file-icon pdf">
                                                                            <i class="fas fa-file-pdf "></i>
                                                                        </div>
                                                                    </c:when>
                                                                    <c:when
                                                                        test="${fn:endsWith(entity.report, '.doc') || fn:endsWith(entity.report, '.docx')}">
                                                                        <i class="fas fa-file-word word"></i>
                                                                    </c:when>
                                                                    <c:otherwise>
                                                                        <i class="fas fa-file other"></i>
                                                                    </c:otherwise>
                                                                </c:choose>
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </div>
                                                    <div class="file-name"
                                                        title="${!empty fileInfo ? fileInfo.fileName : '已上传文件'}">
                                                        <c:choose>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileName != null}">
                                                                ${fileInfo.fileName}
                                                            </c:when>
                                                            <c:when
                                                                test="${!empty fileInfo && fileInfo.exists == false}">
                                                                <span
                                                                    style="color: #ff5722;">${fileInfo.fileName}</span>
                                                            </c:when>
                                                            <c:otherwise>
                                                                已上传文件
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </div>
                                                    <c:if
                                                        test="${!empty fileInfo && fileInfo.exists == true && fileInfo.fileSize != null}">
                                                        <div class="file-size"
                                                            style="font-size: 10px; color: #999; margin-top: 2px;">
                                                            <c:choose>
                                                                <c:when test="${fileInfo.fileSize > 1048576}">
                                                                    <fmt:formatNumber
                                                                        value="${fileInfo.fileSize / 1048576.0}"
                                                                        maxFractionDigits="1" />MB
                                                                </c:when>
                                                                <c:when test="${fileInfo.fileSize > 1024}">
                                                                    <fmt:formatNumber
                                                                        value="${fileInfo.fileSize / 1024.0}"
                                                                        maxFractionDigits="1" />KB
                                                                </c:when>
                                                                <c:otherwise>
                                                                    ${fileInfo.fileSize}B
                                                                </c:otherwise>
                                                            </c:choose>
                                                        </div>
                                                    </c:if>
                                                </div>
                                            </c:if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" id="formBtn" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
                            </div>
                        </div>
                    </form>

                    <script>
                        layui.use(['form', 'laydate', 'upload', 'layer'], function () {
                            var form = layui.form;
                            var laydate = layui.laydate;
                            var upload = layui.upload;
                            var layer = layui.layer;
                            var $ = layui.$;
                            // 年份选择器
                            laydate.render({
                                elem: '#year',
                                type: 'year',
                                format: 'yyyy',
                                value: new Date().getFullYear().toString()
                            });

                            // 文件选择按钮点击事件
                            $('#uploadBtn').click(function () {
                                $('#fileInput').click();
                            });

                            // 文件选择事件
                            $('#fileInput').change(function () {
                                var file = this.files[0];
                                if (file) {
                                    // 显示文件预览
                                    $("#filePreview").html('');
                                    var fileIcon = 'other';
                                    var iconClass = 'fas fa-file';

                                    if (file.type.indexOf('image') !== -1) {
                                        // 如果是图片，显示图片预览
                                        var reader = new FileReader();
                                        reader.onload = function (e) {
                                            $("#filePreview").append('<div class="file-item">' +
                                                '<div class="file-remove" onclick="clearFile()"><i class="layui-icon">&#x1006;</i></div>' +
                                                '<div class="file-icon"><img src="' + e.target.result + '" class="file-preview-img"></div>' +
                                                '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                                                '</div>');
                                        };
                                        reader.readAsDataURL(file);
                                    } else {
                                        // 根据文件类型显示对应图标
                                        if (file.name.endsWith('.xls') || file.name.endsWith('.xlsx') || file.type.indexOf('spreadsheet') !== -1) {
                                            fileIcon = 'excel';
                                            iconClass = 'fas fa-file-excel';
                                        } else if (file.name.endsWith('.pdf') || file.type.indexOf('pdf') !== -1) {
                                            fileIcon = 'pdf';
                                            iconClass = 'fas fa-file-pdf';
                                        } else if (file.name.endsWith('.doc') || file.name.endsWith('.docx') || file.type.indexOf('word') !== -1) {
                                            fileIcon = 'word';
                                            iconClass = 'fas fa-file-word';
                                        }

                                        $("#filePreview").append('<div class="file-item">' +
                                            '<div class="file-remove" onclick="clearFile()"><i class="layui-icon">&#x1006;</i></div>' +
                                            '<div class="file-icon ' + fileIcon + '"><i class="' + iconClass + '"></i></div>' +
                                            '<div class="file-name" title="' + file.name + '">' + file.name + '</div>' +
                                            '</div>');
                                    }
                                }
                            });

                            // 监听表单提交
                            form.on('submit(formDemo)', function (data) {
                                layer.load(1, {
                                    shade: [0.1, '#fff']
                                });

                                // 直接提交表单，让后端处理文件上传
                                return true;
                            });
                        });

                        // 格式化文件大小
                        function formatFileSize(bytes) {
                            if (bytes === 0) return '0 Bytes';
                            var k = 1024;
                            var sizes = ['Bytes', 'KB', 'MB', 'GB'];
                            var i = Math.floor(Math.log(bytes) / Math.log(k));
                            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                        }

                        // 清除已选文件
                        function clearFile() {
                            layui.use(['jquery', 'layer'], function () {
                                var $ = layui.$;
                                var layer = layui.layer;
                                layer.confirm('确定要移除这个文件吗？', function (index) {
                                    $("#filePreview").html('');
                                    $("#report").val('');
                                    // 清空文件输入框，确保可以重新选择相同文件
                                    $("#fileInput").val('');
                                    layer.close(index);
                                });
                            });
                        }

                        // 移除已上传的文件
                        function removeUploadedFile() {
                            layui.use(['jquery', 'layer'], function () {
                                var $ = layui.$;
                                var layer = layui.layer;
                                layer.confirm('确定要移除这个文件吗？', function (index) {
                                    $("#filePreview").html('');
                                    $("#report").val('');
                                    // 清空文件输入框，确保可以重新选择相同文件
                                    $("#fileInput").val('');
                                    layer.close(index);
                                });
                            });
                        }


                        // layui.use('upload', function () {
                        //     var $ = layui.$;
                        //     var upload = layui.upload;
                        //     //执行实例
                        //     var uploadInst = upload.render({
                        //         elem: '#test1' //绑定元素
                        //         , url: '/upload/' //上传接口
                        //         , accept: 'file'
                        //         , multiple: false
                        //         , auto: false
                        //         , bindAction: "#uploadFile"
                        //         , choose: function (obj) {
                        //             //选择文件
                        //             //将每次选择的文件追加到文件队列
                        //             var files = obj.pushFile();
                        //             //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                        //             // obj.preview(function (index, file, result) {
                        //             //     $(".imga").remove();
                        //             //     $("#materialsImg").append('<img src="' + result + '" class="imga" style="width: 100px;height: 100px;">');
                        //             // })
                        //         }
                        //     });
                        // });

                        // 返回按钮点击事件和页面初始化
                        document.addEventListener('DOMContentLoaded', function () {
                            var rollbackBtn = document.getElementById("rollback");
                            if (rollbackBtn) {
                                rollbackBtn.addEventListener("click", function () {
                                    window.history.back();
                                });
                            }
                        });
                    </script>
                </body>

                </html>